<template>
  <div class="tree-container" :class="{ collapsed: isCollapsed }">
    <!-- 添加折叠/展开按钮 -->
    <div class="collapse-button" @click="toggleCollapse">
      <IconFont :name="isCollapsed ? 'left' : 'right'" size="1.3542vw" />
    </div>

    <div class="tree-title">场景树</div>
    <div class="tree-content">
      <ul class="scene-tree-list">
        <li v-for="(item, index) in children" :key="index" class="tree-node">
          <span class="node-name">{{ item.name || '未命名节点' }}</span>
          <IconFont class="node-icon" name="qk" size="0.7292vw" @click="deleteNode(item)" />
        </li>
      </ul>
    </div>
    <div class="save-button">
      <el-button type="primary" @click="saveScene">保存场景</el-button>
    </div>
  </div>
</template>

<script setup>
import { useTreeStore } from '@/stores/treeStore.js'
import { getobjm } from '@/utils/getobjm.js'
import { watch, ref } from 'vue'
import { cloneDeep } from 'lodash'

const treeStore = useTreeStore()
const objm = getobjm()
const children = ref([])
// 修改折叠状态控制变量的初始值为 true，使其默认收起
const isCollapsed = ref(true)

// 切换折叠/展开状态的函数
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
}

watch(
  () => treeStore.change,
  () => {
    children.value = objm.getSceneTree().json.root.children
    console.log('children:', children.value)
  },
  { deep: true, immediate: true },
)

const saveScene = () => {
  const blob = new Blob([JSON.stringify(objm.json)], { type: 'application/json' })
  const a = document.createElement('a')
  a.href = URL.createObjectURL(blob)
  a.download = 'scene.json'
  a.click()
  URL.revokeObjectURL(a.href)
}

const deleteNode = (node) => {
  ElMessageBox.confirm(`确定要删除节点 "${node.name || '未命名节点'}" 吗？`, '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      const nodeTree = objm.getSceneTree().getTreeItemFromSceneObjId(node.sceneObj.id)
      treeStore.destroySceneObjectTreeItem(nodeTree)
      treeStore.treeChange()
      ElMessage({
        type: 'success',
        message: '删除成功',
        showClose: true,
        grouping: true,
        duration: 1500,
      })
    })
    .catch(() => {
      // 取消删除时不做任何操作
    })
}
</script>

<style lang="scss" scoped>
.tree-container {
  position: absolute;
  bottom: 50%;
  right: 1.0417vw;
  transform: translateY(50%);
  width: 15.625vw;
  background-color: rgba(0, 8, 26, 0.8);
  border-radius: 0.4167vw;
  box-shadow: 0 0 0.5208vw rgba(0, 195, 255, 0.5);
  border: 0.0521vw solid rgba(0, 195, 255, 0.6);
  padding: 0.5208vw;
  z-index: 2;
  transition: transform 0.3s ease-in-out;

  // 添加折叠按钮样式
  .collapse-button {
    position: absolute;
    left: -1.8229vw /* 35px -> 1.8229vw */;
    top: 50%;
    transform: translateY(-50%);
    width: 1.8229vw /* 35px -> 1.8229vw */;
    height: 2.6042vw /* 50px -> 2.6042vw */;
    background-color: rgba(0, 8, 26, 0.8);
    border-radius: 0.4167vw 0 0 0.4167vw;
    box-shadow: -0.1042vw 0 0.2604vw rgba(0, 195, 255, 0.5);
    border: 0.0521vw solid rgba(0, 195, 255, 0.6);
    border-right: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #00c3ff;
    z-index: 1;
    &:hover {
      background-color: rgba(0, 8, 26, 0.9);
      box-shadow: -0.1042vw 0 0.3646vw rgba(0, 195, 255, 0.7);
      // hover时图标缩放到0.8倍
      .iconfont {
        transform: scale(0.8);
      }
    }
    // 图标添加过渡效果
    .iconfont {
      transition: transform 0.3s ease;
    }
  }

  // 折叠状态样式
  &.collapsed {
    transform: translateY(50%) translateX(calc(100% + 1.0417vw));

    // 确保折叠按钮在折叠状态下仍然可见
    .collapse-button {
      left: -1.8229vw;
    }
  }

  .tree-title {
    font-size: 0.8333vw;
    color: #00c3ff;
    font-weight: bold;
    padding-bottom: 0.5208vw;
    border-bottom: 0.0521vw solid rgba(0, 195, 255, 0.3);
  }

  .tree-content {
    height: 15.625vw;
    overflow: auto;

    &::-webkit-scrollbar {
      width: 0.4167vw;
    }

    &::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 0.2083vw;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(0, 195, 255, 0.5);
      border-radius: 0.2083vw;
    }

    .tree-node {
      margin: 0.5208vw 0;
      padding: 0.2604vw;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 0.4167vw;
      cursor: default;
      background-color: rgba(55, 153, 180, 0.2);

      &:hover {
        background-color: rgba(0, 195, 255, 0.2);
      }

      .node-name {
        flex: 1;
        font-size: 0.7292vw;
        padding-right: 0.5208vw;
        height: 0.8333vw;
        line-height: 0.8333vw;
        color: #fff;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .node-icon {
        cursor: pointer;
      }
    }
  }

  .save-button {
    padding-top: 0.5208vw;
    border-top: 0.0521vw solid rgba(0, 195, 255, 0.3);

    :deep(.el-button) {
      width: 100%;
      background-color: rgba(0, 195, 255, 0.2);
      border: 0.0521vw solid rgba(0, 195, 255, 0.6);
      color: #00c3ff;
      border-radius: 0.2083vw;
      font-size: 0.625vw;
      height: 1.6667vw;
      line-height: 1.6667vw;
      margin: 0;

      &:hover {
        background-color: rgba(0, 195, 255, 0.4);
      }
    }
  }
}
</style>
